<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .liuyan {
      margin-top: 2%;
      padding: 3%;
      padding-bottom: 70px;
    }
    .ly_l {
      width: 100%;
      margin-bottom: 20px;
    }
    .ly_r {
      width: 100%;
      margin-bottom: 20px;
    }
    .ly_l_t {
      margin-left: 3%;
      float: left;
      max-width: 70%;
      margin-top: 15px;
    }
    .ly_r_t {
      margin-right: 3%;
      float: right;
      max-width: 70%;
      margin-top: 15px;
    }
    .wx_head_l {
      width: 40px;
      float: left;
    }
    .wx_head_r {
      width: 40px;
      float: right;
    }
    .ly_l_t span {
      display: inline-block;
      font-size: 13px;
      line-height: 1em;
    }
    .ly_r_t span {
      display: inline-block;
      font-size: 13px;
      line-height: 1em;
    }
    .ly_l p {
      display: block;
      background: #eaeaea;
      padding: 8px;
      border-radius: 5px;
      background: #ffffff;
      border: 0.5px solid #ff0000;
    }
    .ly_r p {
      display: block;
      background: #eaeaea;
      padding: 8px;
      border-radius: 5px;
      background: #ffffff;
      border: 0.5px solid #ff0000;
    }
    .ly_l p span {
      position: absolute;
      top: -15px;
      left: 0;
      color: #999999;
      display: block;
      width: 150px;
    }
    .ly_r p span {
      position: absolute;
      top: -15px;
      right: 0;
      text-align: right;
      color: #999999;
      display: block;
      width: 150;
    }
    .ly_l p:before {
      position: absolute;
      content: '';
      width: 0;
      height: 0;
      overflow: hidden;
      border: 5px solid transparent;
      border-right-color: #cccccc;
      left: -11px;
      top: 13px;
    }
    .ly_l p:after {
      position: absolute;
      content: "";
      width: 0;
      height: 0;
      overflow: hidden;
      border: 5px solid transparent;
      border-right-color: #ffffff;
      left: -10px;
      top: 13px;
    }
  </style>
</head>
<body>
  <div class="con">
    <div class="con_2">
      <ul class="liuyn clearfix">
        <li class="ly_l clearfix">
          <img src="./images/member_img/logo.jpg" class="wx_head_l" alt="">
          <div class="ly_l_t">
            <p><span>2018-04-04 12:12:12</span>新建订单体验</p>
          </div>
        </li>
        <li class="ly_l clearfix">
          <img src="./images/member_img/logo.jpg" class="wx_head_l" alt="">
          <div class="ly_l_t">
            <p><span>2018-04-04 12:12:12</span>新建订单体验</p>
          </div>
        </li>
        <li class="ly_l clearfix">
          <img src="./images/member_img/logo.jpg" class="wx_head_l" alt="">
          <div class="ly_l_t">
            <p><span>2018-04-04 12:12:12</span>新建订单体验</p>
          </div>
        </li>
        <li class="ly_l clearfix">
          <img src="./images/member_img/logo.jpg" class="wx_head_l" alt="">
          <div class="ly_l_t">
            <p><span>2018-04-04 12:12:12</span>新建订单体验</p>
          </div>
        </li>
        <li class="ly_r clearfix">
          <img src="./images/member_img/logo.jpg" class="wx_head_r" alt="">
          <div class="ly_r_t">
            <p><span>2018-04-04 12:12:12</span>新建订单体验</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>
